<script lang="ts" setup name="flowableProcessDefinition">
import type { DialogModelFlowable, flowable } from '@/index.d';
import { dateTimeToDateTime, getProcessDefinitionVOListByConditionsWithPage, urls } from '@/index';
import { useRequest } from 'vue-request';
import ProcessDefinitionDetailDialog from './ProcessDefinitionDetailDialog.vue';

const title = '流程定义';

const queryCondition = reactive<flowable.ProcessDefinitionQueryCondition>({
  currentPage: 1,
  pageSize: 20,
  processDefinitionIsLatestVersion: true
});

const resetQueryCondition = () => {
  queryCondition.processDefinitionIsLatestVersion = true;
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  delete queryCondition.processDefinitionCategory;
  delete queryCondition.processDefinitionName;
  delete queryCondition.processDefinitionKey;
  delete queryCondition.deploymentTenantId;
};

const getProcessDefinitionVOListByConditionsWithPagePromise = () => {
  return getProcessDefinitionVOListByConditionsWithPage(queryCondition);
};

const {
  data: getProcessDefinitionVOListByConditionsWithPageData,
  loading: getProcessDefinitionVOListByConditionsWithPageLoading,
  run: getProcessDefinitionVOListByConditionsWithPageRun
} = useRequest(getProcessDefinitionVOListByConditionsWithPagePromise);

const total = computed<number>(() => {
  return 1;
});

const tableData = computed(() => {
  return getProcessDefinitionVOListByConditionsWithPageData.value?.records;
});

const processDefinitionDetailDialogModel = reactive<DialogModelFlowable>({
  visible: false,
  title,
  type: 'view',
  change: false
});

const resetProcessDefinitionDetailDialogModel = () => {
  delete processDefinitionDetailDialogModel.id;
  processDefinitionDetailDialogModel.change = false;
  processDefinitionDetailDialogModel.type = 'view';
};

const handleResetQuery = () => {
  resetQueryCondition();
  getProcessDefinitionVOListByConditionsWithPageRun();
};

watch(
  () => processDefinitionDetailDialogModel.visible,
  value => {
    if (!value && processDefinitionDetailDialogModel.change) {
      getProcessDefinitionVOListByConditionsWithPageRun();
    }

    if (value === false) {
      resetProcessDefinitionDetailDialogModel();
    }
  }
);

watch(
  () => queryCondition.processDefinitionIsLatestVersion,
  () => getProcessDefinitionVOListByConditionsWithPageRun()
);
</script>
<template>
  <HqContainerTableFlowable
    :title
    :loading="getProcessDefinitionVOListByConditionsWithPageLoading"
    :base-url="urls.processDefinition"
    :total
    :table-data
    operate-column
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    v-model:detail-dialog-model="processDefinitionDetailDialogModel"
    @handle-query="getProcessDefinitionVOListByConditionsWithPageRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getProcessDefinitionVOListByConditionsWithPageRun"
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.processDefinitionIsLatestVersion"
          placeholder="是否为最新版本"
        >
          <el-option label="仅显示最新版本" :value="true" />
          <el-option label="显示所有版本" :value="false" />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input
          v-model="queryCondition.processDefinitionId"
          placeholder="请输入流程定义id"
          clearable
          @clear="getProcessDefinitionVOListByConditionsWithPageRun"
        />
      </hq-col>
      <hq-col kind="search">
        <el-select
          placeholder="请选择流程定义种类"
          v-model="queryCondition.processDefinitionCategory"
          clearable
          filterable
          @change="getProcessDefinitionVOListByConditionsWithPageRun"
        >
          <HqDeploymentCategoryOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input
          v-model="queryCondition.processDefinitionName"
          placeholder="请输入流程定义name"
          clearable
          @clear="getProcessDefinitionVOListByConditionsWithPageRun"
        />
      </hq-col>
      <hq-col kind="search">
        <el-input
          v-model="queryCondition.deploymentTenantId"
          placeholder="请输入流程部署tenantId"
          clearable
          @clear="getProcessDefinitionVOListByConditionsWithPageRun"
        />
      </hq-col>
      <hq-col kind="search">
        <el-input
          v-model="queryCondition.processDefinitionKey"
          placeholder="请输入流程定义key"
          clearable
          @clear="getProcessDefinitionVOListByConditionsWithPageRun"
        />
      </hq-col>
    </template>
    <template #button> </template>
    <template #tableColumns>
      <!-- <hq-table-column prop="id" label="id" />
      <hq-table-column prop="deploymentId" label="流程部署id" />
      <hq-table-column prop="deploymentName" label="deploymentName" />
      <hq-table-column prop="deploymentCategory" label="流程部署种类" /> -->
      <hq-table-column prop="deploymentKey" label="流程部署Key" />
      <hq-table-column prop="deploymentTenantId" label="租户" />
      <el-table-column
        label="部署时间"
        :formatter="
          (row: flowable.ProcessDefinitionVO) => dateTimeToDateTime(row.deploymentTime as string)
        "
        min-width="200px"
        align="center"
      />
      <!-- <hq-table-column prop="deploymentParentDeploymentId" label="deploymentParentDeploymentId" /> -->
      <!-- <hq-table-column prop="processDefinitionId" label="流程定义id" /> -->
      <hq-table-column prop="processDefinitionKey" label="流程定义Key" />
      <hq-table-column prop="processDefinitionName" label="流程定义名称" />
      <hq-table-column prop="processDefinitionCategory" label="processDefinitionCategory" />
      <hq-table-column prop="processDefinitionVersion" label="流程定义版本" />
      <!-- <hq-table-column prop="processDefinitionResourceName" label="processDefinitionResourceName" /> -->
      <!-- <hq-table-column
        prop="processDefinitionDiagramResourceName"
        label="processDefinitionDiagramResourceName"
      /> -->

      <hq-table-column
        prop="processDefinitionDescription"
        label="processDefinitionDescription"
        :min-width="300"
      />
      <hq-table-column prop="processDefinitionIsSuspended" label="流程定义是否暂停" />
    </template>
    <template #pagination> </template>
  </HqContainerTableFlowable>

  <ProcessDefinitionDetailDialog
    v-model:dialog-model="processDefinitionDetailDialogModel"
    v-if="processDefinitionDetailDialogModel.visible"
  />
</template>
<style lang="scss" scoped></style>
